<template>
  <div>
    <div class="container">
      <DataTable
        rowKey="id"
        :tableData="Data"
        :tableColumn="tableColumn"
        :showConfig = "false"
      >
        <!-- <template #sendBias="{row}">
          <span :class="{red: row.sendBias < 0}">{{row.sendBias}}</span>
        </template>
        <template #checkBias="{row}">
          <span :class="{red: row.checkBias < 0}">{{row.checkBias}}</span>
        </template> -->
      </DataTable>
    </div>
    <CommonDialog
      :rows="rows"
      :form="form"
      title="编辑财务人员"
      :visible="formVisible"
      @hideDialog="hideFormVisible"
      @confirm="confirmHandle()"
    />
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class acceptanceConfig extends Vue {
  formVisible: boolean = false;
  memberList:any = [];
  projectMember:any = [];
  form: any = {
    memberId: undefined
  };
  get rows () {
    return {
      memberId: {
        label: '人员选择',
        el: 'select',
        placeholder: '请选择人员',
        options: this.memberList,
        popupScroll: this.popupScroll,
        rules: [{ required: true, message: '请选择人员', trigger: 'blur' }]
      }
    }
  }
  page:any = 1
  Data: any[] = []
  tableColumn: any = {
    memberCode: {
      label: '人员编码',
      width: 120
    },
    account: {
      label: '账号名称',
      width: 120
    },
    memberName: {
      label: '人员姓名',
      width: 100
    },
    memberPhone: {
      label: '手机号',
      width: 100
    },
    createTime: {
      label: '编辑时间',
      width: 100
    },
    createBy: {
      label: '操作人',
      width: 100
    },
    action: {
          label: '操作',
          width: 120,
          template: [
          {
            tag: 'a',
            text: '编辑',
            callback: this.showEditDialog
          }
        ]
      }
  }
  hideFormVisible () {
    this.formVisible = false;
    this.form.memberId = undefined;
  }
  // 点击编辑
  confirmHandle () {
      this.$api.memberUpdateFinanceMemberFetch({memberId: this.form.memberId}).then((res:any) => {
          if (res.code == 0) {
              this.$message.success('操作成功');
              this.formVisible = false;
              this.form.memberId = undefined;
              this.hideFormVisible()
              this.getList()
          }
      }).catch()
  }
  // 选择人员
  handSelectMember (val:any) {
      this.form.memberId = val
  }

  showEditDialog (val:any) {
    this.form.memberId = val.memberId;
    this.formVisible = true;
  }
  // 获取人员列表
  getMemberList () {
      let listArr:any = []
      let data = {
          page: this.page,
          size: 100,
          searchValue: ''
      }
      this.$api.memberListFetch(data).then((res:any) => {
          if (res.data.records.length > 0) {
            listArr = res.data.records.map((item:any) => ({
                label: item.memberName,
                value: item.id
            }))
          }
          this.memberList = this.memberList.concat(listArr)

          console.log(this.memberList, 'this.memberList')
      }).catch()
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
      if (scrollHeight - scrollTop === clientHeight) {
        this.page++
        this.getMemberList()
      }
  }
  // 获取列表数据
  getList () {
      this.$api.memberFinanceMemberFetch().then((res:any) => {
          if (res.code == 0) {
              this.Data = res.data
          }
      }).catch()
  }
  init () {
      this.getList()
      this.getMemberList()
  }
}
</script>
<style lang='scss' scoped>
.red {
  color: red
}
</style>
